<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>点数据展示</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../css/style.css" />
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="../js/lib/Mapv.js"></script>
<script type="text/javascript" src="../js/lib/example.js"></script>
<script type="text/javascript" src="../js/lib/drive.js"></script>
<script type="text/javascript">

    /**
     * @file 示例代码
     */

    // 添加时间戳
    for (var i = 0; i < driveData.length; i++) {
        driveData[i].count = Math.random() * 10;
    }

    console.log(driveData);

    bmap.centerAndZoom(new BMap.Point(116.404, 40.055), 11); // 初始化地图,设置中心点坐标和地图级别

    // 第一步创建mapv示例
    var mapv = new Mapv({
        drawTypeControl: true,
        map: bmap  // 百度地图的map实例
    });

    var layer = new Mapv.Layer({
        zIndex: 1,
        mapv: mapv,
        dataType: 'polyline',
        coordType: 'bd09mc',
        data: driveData,
        drawType: 'heatmap',
        drawOptions: {
            blur: true, // 是否有模糊效果
            shadowBlur: 20,
            shadowColor: 'black',
            max: 10, // 设置显示的权重最大值
            lineWidth: 5, // 半径大小
            strokeStyle: 'rgba(0, 0, 0, 0.2)',
            maxOpacity: 0.8,
            gradient: { // 显示的颜色渐变范围
                '0': 'blue',
                '0.6': 'cyan',
                '0.7': 'lime',
                '0.8': 'yellow',
                '1.0': 'red'
            }
        }
    });

</script>
</body>

</html>
